<template>
	<view class="page-bg">
		<view class="main-container">
			<view class="tl-panel">
				<u-search placeholder="请输出疾病名称" v-model="keyword" shape="square" bg-color="ffffff"
					border-color="#2851F3" heigth="88rpx" action-text="取消" :action-style="actionStyle"></u-search>
			</view>
			<view class="tl-history">
				<view class="tl-flex tl-flex-between">
					<view class="tl-font-32-333-6">最近搜索</view>
					<view class='delete-icon'>
						<image src="https://file.genepre.com/wechat/shanchu.png" class="tl-img-44" />
					</view>
				</view>

				<view class="tl-flex tl-flex-wrap tl-flex-l">
					<view class="tl-tag-192" v-for="(item,index) in 5" :key="index">心肌梗塞</view>
				</view>

				<view class="tl-section-list">
					<view class="tl-list-item" v-for="(item,index) in 5" :key="index">
						<!-- 包含高亮的字段 -->
						<rich-text :nodes="item.name">左对齐</rich-text>
					</view>
				</view>

				<view>
					<u-empty :emptyImg="emptyImg" :imgStyle="imgStyle" :emptyText="emptyText" />
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emptyImg: 'https://file.genepre.com/wechat/nomsg7.png',
				emptyText: '暂无搜索结果',
				keyword: '',
				actionStyle: {
					color: '#333',
					fontsize: '32rpx'
				},
				imgStyle: {
					width: '254rpx',
					height: '230rpx'
				},
				historyList: [], // 本地搜索记录
				contactsList: [], // 搜索的处理结果
			}
		},
		methods: {
			confirm() {
				let that = this
				app.search({}, (res) => {
					if (res.code == 0) {
						// 过滤出符合条件的值高亮
						res.data.map((item, index) => {
							if (item.name.includes(that.keyword)) {
								item.name = that.join(item.name, that.keyword)
							}
						})
						that.contactsList = res.data
					} else {
						app.showToast(res.message)
					}
				})
			},

			// 拼接
			join(str, key) {
				var reg = new RegExp(`(${key})`, 'gm')
				var replace = '<span style="color:#2851F3">$1</span>'
				return str.replace(reg, replace)
			}
		}
	}
</script>

<style lang="less" scoped>
	.tl-flex-between{
		display: flex;
	}
	.tl-flex-wrap{
		display: flex;
		flex-wrap: wrap;
	}
	.delete-icon{
		display: flex;
		flex: 1;
		justify-content: flex-end;
	}
	.page-bg {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-size: 750rpx auto;
		background-color: #F9F9F9;
	}

	.main-container {
		width: 686rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.tl-panel {
		margin-top: 40rpx;
		margin-bottom: 48rpx;
	}

	.tl-img-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.tl-tag-192 {
		width: 192rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #F5F5F5;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		border-radius: 32rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
	}

	.tl-list-item {
		height: 98rpx;
		line-height: 98rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		border-bottom: 2rpx solid #EFEFEF;
	}
</style>
